import React from 'react';
import Modal from '../Modal';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import history from "../../history";
import { fetchStream, deleteStream } from "../../actions";

class StreamDelete extends React.Component {
    componentDidMount() {
        this.props.fetchStream(this.props.match.params.id);
    }

    renderActions() {
      const {id} = this.props.match.params;

      return (
        <React.Fragment>
            <button
                onClick={() => this.props.deleteStream(id)}
                className="ui button negative"
            >
                删除
            </button>
            <Link to="/" className="ui button">取消</Link>
        </React.Fragment>
        );
    }

    renderContent() {
        if (!this.props.stream) {
            return "你确定想删除这个直播间码?";
        }
        return `你确定想删除这个标题为: ${this.props.stream.title}直播间吗?`;

    }

    render() {
        return (
            <div>
                <Modal
                    title="删除直播间"
                    content={this.renderContent()}
                    actions={this.renderActions()}
                    onDismiss={() => history.push('/')}
                />
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return { stream: state.streams[ownProps.match.params.id] }
};


export default connect(
    mapStateToProps,
    { fetchStream, deleteStream }
)(StreamDelete);